<template>
  <div style="background: #f5f5f5; height: 100vh">
    <div class="handle_collection">
      <a-space size="medium">
        <div class="fanhuiBtn" @click="goNext">
          <icon-arrow-left size="16" />
          <span class="texts"> 返回 </span>
        </div>
      </a-space>
      <a-space size="medium">
        <a-button type="primary" @click="handleSubmitGood"> 保存 </a-button>
      </a-space>
    </div>

    <div class="good-content">
      <div class="left-box">
        <!-- <div></div> -->
        <a-affix :offsetTop="80">
          <a-anchor line-less :change-hash="false" scroll-container="#container">
            <a-anchor-link
              v-for="item in leftList"
              :key="item.id"
              @click="leftClickItem(item.id)"
              :href="item.href"
              >{{ item.name }}</a-anchor-link
            >
          </a-anchor>
        </a-affix>
      </div>
      <div class="right-box" style="margin-bottom: 30px">
        <a-form
          id="container"
          style="height: calc(100vh - 150px); overflow-y: auto"
          :model="goodsForm"
          ref="goodRef"
          auto-label-width
        >
          <div class="right-box-item" style="margin-top: 0" id="tops-1">
            <div class="right-box-item-top">
              <div class="left-title">商品信息</div>
              <div class="right-title">收起</div>
            </div>
            <div class="right-box-item-bottom">
              <div class="right-box-item-bottom-50">
                <a-form-item field="type" label="商品类型">
                  <div class="radio-box">
                    <div
                      @click="changeType(0)"
                      :class="goodsForm.type == 0 ? 'active-radio-box-item' : 'radio-box-item'"
                      >物联卡</div
                    >
                    <div
                      @click="changeType(1)"
                      :class="goodsForm.type == 1 ? 'active-radio-box-item' : 'radio-box-item'"
                      style="margin-left: 10px"
                      >号卡</div
                    >
                  </div>
                </a-form-item>
              </div>
              <div class="right-box-item-bottom-50">
                <a-form-item field="operator" label="运营商">
                  <a-checkbox-group v-model="goodsForm.operator">
                    <a-checkbox :value="0">
                      <template #checkbox="{ checked }">
                        <div
                          align="start"
                          class="custom-checkbox-card"
                          :class="{ 'custom-checkbox-card-checked': checked }"
                        >
                          <div>
                            <div className="custom-checkbox-card-title"
                              ><img src="@/assets/yd.png" alt="" /> 移动
                            </div>
                          </div>
                        </div>
                      </template>
                    </a-checkbox>
                    <a-checkbox :value="1">
                      <template #checkbox="{ checked }">
                        <div
                          align="start"
                          class="custom-checkbox-card"
                          :class="{ 'custom-checkbox-card-checked': checked }"
                        >
                          <div>
                            <div className="custom-checkbox-card-title">
                              <img src="@/assets/lt.png" alt="" />联通
                            </div>
                          </div>
                        </div>
                      </template>
                    </a-checkbox>
                    <a-checkbox :value="2">
                      <template #checkbox="{ checked }">
                        <div
                          align="start"
                          class="custom-checkbox-card"
                          :class="{ 'custom-checkbox-card-checked': checked }"
                        >
                          <div>
                            <div className="custom-checkbox-card-title"
                              ><img src="@/assets/dx.png" alt="" /> 电信
                            </div>
                          </div>
                        </div>
                      </template>
                    </a-checkbox>
                    <a-checkbox :value="3">
                      <template #checkbox="{ checked }">
                        <div
                          align="start"
                          class="custom-checkbox-card"
                          :class="{ 'custom-checkbox-card-checked': checked }"
                        >
                          <div>
                            <div className="custom-checkbox-card-title"
                              ><img src="@/assets/gd.png" alt="" /> 广电
                            </div>
                          </div>
                        </div>
                      </template>
                    </a-checkbox>
                  </a-checkbox-group>
                </a-form-item>
              </div>
              <div class="right-box-item-bottom-50">
                <a-form-item label="所属分类" field="classId">
                  <a-select
                    placeholder="请选择所属分类"
                    allow-clear
                    v-model="goodsForm.classId"
                    allow-search
                  >
                    <a-option v-for="item in classList" :key="item.id" :value="item.id">{{
                      item.name
                    }}</a-option>
                  </a-select>
                </a-form-item>
              </div>
              <div class="right-box-item-bottom-50">
                <a-form-item
                  field="channelId"
                  label="所属渠道"
                  asterisk-position="end"
                  :rules="[{ required: true, message: '所属分类不能为空' }]"
                  :validate-trigger="['change', 'input']"
                >
                  <a-select
                    class="width100"
                    v-model="goodsForm.channelId"
                    placeholder="请选择所属渠道"
                    allow-clear
                  >
                    <a-option v-for="item in channelList" :key="item.id" :value="item.id">{{
                      item.name
                    }}</a-option>
                  </a-select>
                  <template #extra>
                    <div>商品的所属渠道</div>
                  </template>
                </a-form-item>
              </div>
              <div class="right-box-item-bottom-50">
                <a-form-item
                  field="name"
                  label="商品名称"
                  asterisk-position="end"
                  :rules="[{ required: true, message: '商品名称不能为空' }]"
                  :validate-trigger="['change', 'input']"
                >
                  <a-input v-model="goodsForm.name" placeholder="请输入商品名称" />
                  <template #extra>
                    <div>商品的名称</div>
                  </template>
                </a-form-item>
              </div>
              <div class="right-box-item-bottom-50">
                <a-form-item
                  field="cost"
                  label="商品成本"
                  asterisk-position="end"
                  :rules="[{ required: true, message: '商品成本不能为空' }]"
                  :validate-trigger="['change', 'input']"
                >
                  <a-input-number v-model="goodsForm.cost" placeholder="请输入商品成本" />
                  <template #extra>
                    <div>商品的成本价</div>
                  </template>
                </a-form-item>
              </div>
              <div class="right-box-item-bottom-50">
                <a-form-item
                  field="price"
                  label="商品售价"
                  asterisk-position="end"
                  :rules="[{ required: true, message: '商品售价不能为空' }]"
                  :validate-trigger="['change', 'input']"
                >
                  <a-input-number v-model="goodsForm.price" placeholder="请输入商品售价" />
                  <template #extra>
                    <div>商品的售价</div>
                  </template>
                </a-form-item>
              </div>
              <div class="right-box-item-bottom-50">
                <a-form-item
                  field="sort"
                  label="商品排序"
                  asterisk-position="end"
                  :rules="[{ required: true, message: '商品排序不能为空' }]"
                  :validate-trigger="['change', 'input']"
                >
                  <a-input-number v-model="goodsForm.sort" placeholder="请输入商品排序" />
                  <template #extra>
                    <div>排序数字越大展示商品时越靠前</div>
                  </template>
                </a-form-item>
              </div>
              <div class="right-box-item-bottom-50">
                <a-form-item field="sales" label="商品销量">
                  <a-input-number :min="0" v-model="goodsForm.sales" placeholder="请输入商品销量" />
                  <template #extra>
                    <div>商品在前台展示的销量</div>
                  </template>
                </a-form-item>
              </div>
              <div class="right-box-item-bottom-50">
                <a-form-item field="shortIntroduce" label="简短介绍">
                  <a-input v-model="goodsForm.shortIntroduce" placeholder="请输入简短介绍" />
                  <template #extra>
                    <div>简短介绍在前台展示时使用</div>
                  </template>
                </a-form-item>
              </div>
              <!-- <div class="right-box-item-bottom-50">
                <a-form-item field="shareIntroduce" label="分享介绍">
                  <a-input v-model="goodsForm.shareIntroduce" placeholder="请输入分享介绍" />
                  <template #extra>
                    <div>商品分享为卡片时的介绍【一般分享在微信好友或群时可见】</div>
                  </template>
                </a-form-item>
              </div> -->
              <div class="right-box-item-bottom-50">
                <a-form-item field="coding" label="商品编码">
                  <a-input v-model="goodsForm.coding" placeholder="请输入商品编码" />
                  <template #extra>
                    <div>商品编码由上游提供，不知道是什么的请联系上游</div>
                  </template>
                </a-form-item>
              </div>
              <div class="right-box-item-bottom-50">
                <a-form-item field="seriesId" label="绑定系列">
                  <a-select
                    v-model="goodsForm.seriesId"
                    placeholder="请选择系列"
                    allow-clear
                    allow-search
                  >
                    <a-option v-for="item in seriesNo" :key="item.id" :value="item.id">{{
                      item.name
                    }}</a-option>
                  </a-select>
                  <template #extra>
                    <div>绑定系列后，客户如果绑定了对应的系列，商品内可查看对应套餐的成本价</div>
                  </template>
                </a-form-item>
              </div>
              <div class="right-box-item-bottom-50">
                <a-form-item field="posterId" label="海报模板">
                  <a-select
                    class="width100"
                    v-model="goodsForm.posterId"
                    placeholder="请选择海报模板"
                    allow-clear
                  >
                    <a-option v-for="item in posterList" :key="item.id" :value="item.id">{{
                      item.name
                    }}</a-option>
                  </a-select>
                  <template #extra>
                    <div>选择海报模板后，客户在点击分享商品时，将弹出自己设置的海报模板 </div>
                  </template>
                </a-form-item>
              </div>
              <div class="right-box-item-bottom-50">
                <a-form-item field="tagList" label="商品标签">
                  <a-select
                    class="width100"
                    v-model="goodsForm.tagList"
                    placeholder="请选择商品标签"
                    allow-clear
                    multiple
                    :max-tag-count="1"
                  >
                    <a-option v-for="item in tagList" :key="item.id" :value="item.id">{{
                      item.name
                    }}</a-option>
                  </a-select>
                  <template #extra>
                    <div>商品标签代表这个商品的特色</div>
                  </template>
                </a-form-item>
              </div>
              <div v-if="goodsForm.id" class="right-box-item-bottom-50">
                <a-form-item field="state" label="商品状态">
                  <a-radio-group class="radio-bcg" v-model="goodsForm.state">
                    <a-radio :value="true">
                      <template #radio="{ checked }">
                        <div
                          style="display: flex"
                          :class="{ 'custom-radio-card-checked': checked }"
                        >
                          <div className="custom-radio-card-mask">
                            <div className="custom-radio-card-mask-dot"></div>
                          </div>
                          <div className="custom-radio-card-title">开启</div>
                        </div>
                      </template>
                    </a-radio>
                    <a-radio :value="false">
                      <template #radio="{ checked }">
                        <div
                          style="display: flex"
                          :class="{ 'custom-radio-card-checked': checked }"
                        >
                          <div className="custom-radio-card-mask">
                            <div className="custom-radio-card-mask-dot"></div> </div
                          ><div className="custom-radio-card-title">关闭</div>
                        </div>
                      </template>
                    </a-radio>
                  </a-radio-group>
                </a-form-item>
              </div>
              <div class="right-box-item-bottom-50">
                <a-form-item field="mainPush" label="商品主推">
                  <a-radio-group class="radio-bcg" v-model="goodsForm.mainPush">
                    <a-radio :value="true">
                      <template #radio="{ checked }">
                        <div
                          style="display: flex"
                          :class="{ 'custom-radio-card-checked': checked }"
                        >
                          <div className="custom-radio-card-mask">
                            <div className="custom-radio-card-mask-dot"></div>
                          </div>
                          <div className="custom-radio-card-title">开启</div>
                        </div>
                      </template>
                    </a-radio>
                    <a-radio :value="false">
                      <template #radio="{ checked }">
                        <div
                          style="display: flex"
                          :class="{ 'custom-radio-card-checked': checked }"
                        >
                          <div className="custom-radio-card-mask">
                            <div className="custom-radio-card-mask-dot"></div>
                          </div>
                          <div className="custom-radio-card-title">关闭</div>
                        </div>
                      </template>
                    </a-radio>
                  </a-radio-group>
                  <template #extra>
                    <div>开启：客户会看到主推的标签</div>
                  </template>
                </a-form-item>
              </div>
              <div class="right-box-item-bottom-50">
                <a-form-item field="starRating" label="推荐指数">
                  <a-rate
                    class="radio-bcg"
                    style="font-size: 24px"
                    v-model="goodsForm.starRating"
                  />
                  <template #extra>
                    <div>代理商后台展示的推荐指数</div>
                  </template>
                </a-form-item>
              </div>
              <div class="right-box-item-bottom-50">
                <a-form-item field="belongingPlace" label="归属地">
                  <a-radio-group
                    class="radio-bcg"
                    @change="goodsForm.belongingPlaceArea = ''"
                    v-model="goodsForm.belongingPlace"
                  >
                    <a-radio :value="0">
                      <template #radio="{ checked }">
                        <div
                          style="display: flex"
                          :class="{ 'custom-radio-card-checked': checked }"
                        >
                          <div className="custom-radio-card-mask">
                            <div className="custom-radio-card-mask-dot"></div>
                          </div>
                          <div className="custom-radio-card-title">随机归属地</div>
                        </div>
                      </template>
                    </a-radio>
                    <a-radio :value="1">
                      <template #radio="{ checked }">
                        <div
                          style="display: flex"
                          :class="{ 'custom-radio-card-checked': checked }"
                        >
                          <div className="custom-radio-card-mask">
                            <div className="custom-radio-card-mask-dot"></div>
                          </div>
                          <div className="custom-radio-card-title">固定归属地</div>
                        </div>
                      </template>
                    </a-radio>
                    <a-radio :value="2">
                      <template #radio="{ checked }">
                        <div
                          style="display: flex"
                          :class="{ 'custom-radio-card-checked': checked }"
                        >
                          <div className="custom-radio-card-mask">
                            <div className="custom-radio-card-mask-dot"></div>
                          </div>
                          <div className="custom-radio-card-title">收货归属地</div>
                        </div>
                      </template>
                    </a-radio>
                  </a-radio-group>
                  <template #extra>
                    <div>固定归属地时可选择归属地</div>
                  </template>
                </a-form-item>
              </div>
              <div class="right-box-item-bottom-50">
                <a-form-item
                  field="belongingPlaceArea"
                  v-if="goodsForm.belongingPlace == 1"
                  label="选择地区"
                >
                  <a-cascader
                    v-model="goodsForm.belongingPlaceArea"
                    :options="districtsList"
                    :field-names="fieldNames"
                    placeholder="请输入地区"
                  />
                  <template #extra>
                    <div>选择号码的归属地</div>
                  </template>
                </a-form-item>
              </div>
            </div>
          </div>
          <div class="right-box-item" id="tops-2">
            <div class="right-box-item-top">
              <div class="left-title">商品介绍</div>
              <div class="right-title">收起</div>
            </div>
            <div class="right-box-item-bottom">
              <div
                style="
                  width: calc(50% - 10px);

                  margin-bottom: 30px;
                  margin-top: 10px;
                "
              >
                <a-form-item label="商品图片" asterisk-position="end">
                  <div class="imageBoxDetail">
                    <div
                      class="delImages"
                      v-show="goodsForm.img.length > 0"
                      v-for="(item, index) in goodsForm.img"
                      :key="index"
                    >
                      <img class="showImage" :src="reSetImage(item.url)" alt="" />
                      <div class="delBox" @click="delDetailImg(item, index)">
                        <icon-delete style="color: #fff; font-size: 16px" />
                      </div>
                    </div>

                    <div class="chooseImageBtns" @click="clickChoose('goodsImage2')">
                      <icon-plus :style="{ fontSize: '20px', color: '#86909C' }" />
                    </div>
                  </div>
                  <template #extra>
                    <div>第一张默认为商品主图，最多上传10张。</div>
                  </template>
                </a-form-item>
                <!-- <a-form-item field="commissionRule" label="商品图片">
                  <a-upload
                    list-type="picture-card"
                    action="/app/file/upload"
                    :file-list="goodsForm.img"
                    @success="onSuccessBcg"
                    @before-remove="delImg"
                    image-preview
                  />
                  <template #extra>
                    <div>第一张默认为商品主图，最多上传10张。</div>
                  </template>
                </a-form-item> -->
                <a-form-item field="placeTemplate" label="下单模板">
                  <a-radio-group class="radio-bcg" v-model="goodsForm.placeTemplate">
                    <a-radio :value="1">
                      <template #radio="{ checked }">
                        <div
                          style="display: flex"
                          :class="{ 'custom-radio-card-checked': checked }"
                        >
                          <div className="custom-radio-card-mask">
                            <div className="custom-radio-card-mask-dot"></div> </div
                          ><div className="custom-radio-card-title">模板1</div>
                        </div>
                      </template>
                    </a-radio>
                    <a-radio :value="2">
                      <template #radio="{ checked }">
                        <div
                          style="display: flex"
                          :class="{ 'custom-radio-card-checked': checked }"
                        >
                          <div className="custom-radio-card-mask">
                            <div className="custom-radio-card-mask-dot"></div> </div
                          ><div className="custom-radio-card-title">模板2</div>
                        </div>
                      </template>
                    </a-radio>
                  </a-radio-group>
                  <template #extra>
                    <div>下单页面的模板</div>
                  </template>
                </a-form-item>
                <a-form-item field="placeTemplateBackgroundColor" label="背景颜色">
                  <a-input
                    v-model="goodsForm.placeTemplateBackgroundColor"
                    placeholder="请选择背景颜色"
                  >
                    <template #append>
                      <a-button type="primary" @click="openColorPicking"> 吸色笔 </a-button>
                    </template>
                  </a-input>
                  <template #extra>
                    <div>请选择适合下单模板的颜色</div>
                  </template>
                </a-form-item>
                <a-form-item field="content" label="图文详情">
                  <richTextEditors v-model="goodsForm.content" ref="richTextEditors" />
                  <template #extra v-if="expand == false">
                    <div style="color: #3491fa; font-size: 11px; cursor: pointer" @click="expandFn"
                      >展开更多
                    </div>
                  </template>
                </a-form-item>
                <a-form-item v-if="expand == true" field="discountIntroduce" label="优惠详情">
                  <richTextEditors v-model="goodsForm.discountIntroduce" ref="richTextEditors" />
                  <template #extra>
                    <div style="color: #3491fa; font-size: 11px; cursor: pointer" @click="expandFn"
                      >收起
                    </div>
                  </template>
                </a-form-item>
              </div>
              <div style="display: flex; justify-content: center; flex-wrap: wrap; width: 50%">
                <div
                  :style="{
                    width: '300px',
                    height: '520px',
                    backgroundColor: goodsForm.placeTemplateBackgroundColor
                      ? goodsForm.placeTemplateBackgroundColor
                      : '#f2f3f5',
                    borderRadius: '5px',
                  }"
                ></div>
                <div
                  style="
                    width: 100%;
                    text-align: center;
                    font-size: 11px;
                    color: #86909c;
                    margin-top: 10px;
                  "
                  >下单模板预览</div
                >
              </div>
            </div>
          </div>
          <div class="right-box-item" id="tops-3">
            <div class="right-box-item-top">
              <div class="left-title">套餐信息</div>
              <div class="right-title">收起</div>
            </div>
            <div class="right-box-item-bottom">
              <div class="right-box-item-bottom-50">
                <a-form-item field="setMealPrice" label="套餐价格">
                  <a-input-number v-model="goodsForm.setMealPrice" placeholder="请输入套餐价格" />
                  <template #extra>
                    <div>套餐每个月的月租</div>
                  </template>
                </a-form-item>
              </div>
              <div class="right-box-item-bottom-50">
                <a-form-item field="setMealGeneralFlow" label="套餐流量">
                  <a-input-group style="width: 100%">
                    <a-input
                      v-model="goodsForm.setMealGeneralFlow"
                      placeholder="请输入通用流量"
                      allow-clear
                    />
                    <a-input
                      v-model="goodsForm.setMealDirectionalFlow"
                      placeholder="请输入定向流量"
                      allow-clear
                    />
                  </a-input-group>
                  <template #extra>
                    <div>第一个框是通用流量，第二个框是定向流量</div>
                  </template>
                </a-form-item>
              </div>
              <div class="right-box-item-bottom-50">
                <a-form-item field="setMealOriginalPrice" label="套餐原价">
                  <a-input-number
                    v-model="goodsForm.setMealOriginalPrice"
                    placeholder="请输入套餐原价"
                  />
                  <template #extra>
                    <div>套餐优惠前的价格</div>
                  </template>
                </a-form-item>
              </div>
              <div class="right-box-item-bottom-50">
                <a-form-item field="setMealOriginalGeneralFlow" label="原流量">
                  <a-input-group style="width: 100%">
                    <a-input
                      v-model="goodsForm.setMealOriginalGeneralFlow"
                      placeholder="请输入通用流量"
                      allow-clear
                    />
                    <a-input
                      v-model="goodsForm.setMealOriginalDirectionalFlow"
                      placeholder="请输入定向流量"
                      allow-clear
                    />
                  </a-input-group>
                  <template #extra>
                    <div>套餐优惠前的流量</div>
                  </template>
                </a-form-item>
              </div>
              <div class="right-box-item-bottom-50">
                <a-form-item field="callMinutes" label="通话时长">
                  <a-input-number v-model="goodsForm.callMinutes" placeholder="请输入通话时长" />
                  <template #extra>
                    <div>通话时长为套餐内免费的通话时长</div>
                  </template>
                </a-form-item>
              </div>
              <div class="right-box-item-bottom-50">
                <a-form-item field="setMealIntroduce" label="套餐介绍">
                  <a-input v-model="goodsForm.setMealIntroduce" placeholder="请输入套餐介绍" />
                  <template #extra>
                    <div>简短的介绍套餐</div>
                  </template>
                </a-form-item>
              </div>
              <div class="right-box-item-bottom-50">
                <a-form-item field="firstPayAmount" label="首充金额">
                  <a-input-number
                    :min="0"
                    v-model="goodsForm.firstPayAmount"
                    placeholder="请输入首充金额"
                  />
                  <template #extra>
                    <div>开卡预存的金额</div>
                  </template>
                </a-form-item>
              </div>
              <div class="right-box-item-bottom-50">
                <a-form-item field="firstPayIntroduce" label="首充描述">
                  <a-input v-model="goodsForm.firstPayIntroduce" placeholder="请输入首充描述" />
                  <template #extra>
                    <div>首充的步骤描述</div>
                  </template>
                </a-form-item>
              </div>
              <div class="right-box-item-bottom-50">
                <a-form-item field="contractTime" label="合约时间">
                  <a-input-number v-model="goodsForm.contractTime" placeholder="请输入合约时间" />
                  <template #extra>
                    <div>开卡后多长时间内不能注销，单位月</div>
                  </template>
                </a-form-item>
              </div>
              <div class="right-box-item-bottom-50">
                <a-form-item field="discountTime" label="优惠时长">
                  <a-input v-model="goodsForm.discountTime" placeholder="请输入优惠时长">
                    <template #append>
                      <a-radio-group v-model="goodsForm.discountTimeType">
                        <a-radio :value="0">
                          <template #radio="{ checked }">
                            <div
                              style="display: flex"
                              :class="{ 'custom-radio-card-checked': checked }"
                            >
                              <div className="custom-radio-card-mask">
                                <div className="custom-radio-card-mask-dot"></div> </div
                              ><div className="custom-radio-card-title">固定优惠</div>
                            </div>
                          </template>
                        </a-radio>
                        <a-radio :value="1">
                          <template #radio="{ checked }">
                            <div
                              style="display: flex"
                              :class="{ 'custom-radio-card-checked': checked }"
                            >
                              <div className="custom-radio-card-mask">
                                <div className="custom-radio-card-mask-dot"></div> </div
                              ><div className="custom-radio-card-title">到期可续</div>
                            </div>
                          </template>
                        </a-radio>
                      </a-radio-group>
                    </template>
                  </a-input>
                  <template #extra>
                    <div>优惠套餐的优惠时长，单位月</div>
                  </template>
                </a-form-item>
              </div>
            </div>
          </div>
          <div class="right-box-item" id="tops-4">
            <div class="right-box-item-top">
              <div class="left-title">下单设置</div>
              <div class="right-title">收起</div>
            </div>
            <div class="right-box-item-bottom">
              <div class="right-box-item-bottom-50">
                <a-form-item label="设置地区" field="areaCode">
                  <a-button type="primary" @click="clickSet">
                    <template #icon>
                      <icon-plus />
                    </template>
                    <!-- Use the default slot to avoid extra spaces -->
                    <template #default>{{
                      goodsForm.areaType == 1 ? '设置禁区' : '设置可发地区'
                    }}</template>
                  </a-button>
                  <a-col :span="12">
                    <a-alert
                      v-if="goodsForm.areaType == 1"
                      style="height: 32px; margin-left: 20px"
                      type="error"
                      >{{ goodsForm.areaCode.length == 0 ? '未选择禁区' : '已选择禁区' }}</a-alert
                    >
                    <a-alert v-else style="height: 32px; margin-left: 20px" type="success">{{
                      goodsForm.areaCode.length == 0 ? '未选择可发地区' : '已选择可发地区'
                    }}</a-alert>
                  </a-col>
                  <template #extra>
                    <div>按照自己需求选择</div>
                  </template>
                </a-form-item>
              </div>
              <div class="right-box-item-bottom-50">
                <a-form-item field="areaType" label="地区类型">
                  <a-radio-group class="radio-bcg" v-model="goodsForm.areaType">
                    <a-radio :value="0">
                      <template #radio="{ checked }">
                        <div
                          style="display: flex"
                          :class="{ 'custom-radio-card-checked': checked }"
                        >
                          <div className="custom-radio-card-mask">
                            <div className="custom-radio-card-mask-dot"></div> </div
                          ><div className="custom-radio-card-title">可发货地区</div>
                        </div>
                      </template>
                    </a-radio>
                    <a-radio :value="1">
                      <template #radio="{ checked }">
                        <div
                          style="display: flex"
                          :class="{ 'custom-radio-card-checked': checked }"
                        >
                          <div className="custom-radio-card-mask">
                            <div className="custom-radio-card-mask-dot"></div> </div
                          ><div className="custom-radio-card-title">不可发货地区</div>
                        </div>
                      </template>
                    </a-radio>
                  </a-radio-group>
                  <template #extra>
                    <div>设置不可发货地区客户下单时会不显示</div>
                  </template>
                </a-form-item>
              </div>
              <div class="right-box-item-bottom-50">
                <a-form-item field="idCard" label="证件号码">
                  <a-radio-group class="radio-bcg" v-model="goodsForm.idCard">
                    <a-radio :value="0">
                      <template #radio="{ checked }">
                        <div
                          style="display: flex"
                          :class="{ 'custom-radio-card-checked': checked }"
                        >
                          <div className="custom-radio-card-mask">
                            <div className="custom-radio-card-mask-dot"></div> </div
                          ><div className="custom-radio-card-title">隐藏</div>
                        </div>
                      </template>
                    </a-radio>
                    <a-radio :value="1">
                      <template #radio="{ checked }">
                        <div
                          style="display: flex"
                          :class="{ 'custom-radio-card-checked': checked }"
                        >
                          <div className="custom-radio-card-mask">
                            <div className="custom-radio-card-mask-dot"></div> </div
                          ><div className="custom-radio-card-title">随意输</div>
                        </div>
                      </template>
                    </a-radio>
                    <a-radio :value="2">
                      <template #radio="{ checked }">
                        <div
                          style="display: flex"
                          :class="{ 'custom-radio-card-checked': checked }"
                        >
                          <div className="custom-radio-card-mask">
                            <div className="custom-radio-card-mask-dot"></div>
                          </div>
                          <div className="custom-radio-card-title">格式合法</div>
                        </div>
                      </template>
                    </a-radio>
                  </a-radio-group>
                  <template #extra>
                    <div>隐藏：下单不需要输入身份证号码；格式合法：验证身份证号码格式</div>
                  </template>
                </a-form-item>
              </div>
              <div class="right-box-item-bottom-50">
                <a-form-item field="placeOrderCheck" label="验证方法">
                  <a-radio-group class="radio-bcg" v-model="goodsForm.placeOrderCheck">
                    <a-radio :value="-1">
                      <template #radio="{ checked }">
                        <div
                          style="display: flex"
                          :class="{ 'custom-radio-card-checked': checked }"
                        >
                          <div className="custom-radio-card-mask">
                            <div className="custom-radio-card-mask-dot"></div> </div
                          ><div className="custom-radio-card-title">不验证</div>
                        </div>
                      </template>
                    </a-radio>
                    <a-radio :value="0">
                      <template #radio="{ checked }">
                        <div
                          style="display: flex"
                          :class="{ 'custom-radio-card-checked': checked }"
                        >
                          <div className="custom-radio-card-mask">
                            <div className="custom-radio-card-mask-dot"></div> </div
                          ><div className="custom-radio-card-title">验证码</div>
                        </div>
                      </template>
                    </a-radio>
                    <a-radio :value="1">
                      <template #radio="{ checked }">
                        <div
                          style="display: flex"
                          :class="{ 'custom-radio-card-checked': checked }"
                        >
                          <div className="custom-radio-card-mask">
                            <div className="custom-radio-card-mask-dot"></div> </div
                          ><div className="custom-radio-card-title">二要素</div>
                        </div>
                      </template>
                    </a-radio>
                    <a-radio :value="2">
                      <template #radio="{ checked }">
                        <div
                          style="display: flex"
                          :class="{ 'custom-radio-card-checked': checked }"
                        >
                          <div className="custom-radio-card-mask">
                            <div className="custom-radio-card-mask-dot"></div> </div
                          ><div className="custom-radio-card-title">三要素</div>
                        </div>
                      </template>
                    </a-radio>
                  </a-radio-group>
                  <template #extra>
                    <div
                      >验证码：下单需要接验证码；二要素：姓名身份证号需要对应；三要素：姓名身份证号手机号需要对应</div
                    >
                  </template>
                </a-form-item>
              </div>
              <div class="right-box-item-bottom-50">
                <a-form-item field="selectNumberType" label="选号方式">
                  <a-radio-group
                    class="radio-bcg"
                    @change="goodsForm.selectNumberPoolId = ''"
                    v-model="goodsForm.selectNumberType"
                  >
                    <a-radio :value="0">
                      <template #radio="{ checked }">
                        <div
                          style="display: flex"
                          :class="{ 'custom-radio-card-checked': checked }"
                        >
                          <div className="custom-radio-card-mask">
                            <div className="custom-radio-card-mask-dot"></div> </div
                          ><div className="custom-radio-card-title">随机号码</div>
                        </div>
                      </template>
                    </a-radio>
                    <a-radio :value="1">
                      <template #radio="{ checked }">
                        <div
                          style="display: flex"
                          :class="{ 'custom-radio-card-checked': checked }"
                        >
                          <div className="custom-radio-card-mask">
                            <div className="custom-radio-card-mask-dot"></div> </div
                          ><div className="custom-radio-card-title">激活号码</div>
                        </div>
                      </template>
                    </a-radio>
                    <a-radio :value="2">
                      <template #radio="{ checked }">
                        <div
                          style="display: flex"
                          :class="{ 'custom-radio-card-checked': checked }"
                        >
                          <div className="custom-radio-card-mask">
                            <div className="custom-radio-card-mask-dot"></div> </div
                          ><div className="custom-radio-card-title">在线选号</div>
                        </div>
                      </template>
                    </a-radio>
                    <a-radio :value="3">
                      <template #radio="{ checked }">
                        <div
                          style="display: flex"
                          :class="{ 'custom-radio-card-checked': checked }"
                        >
                          <div className="custom-radio-card-mask">
                            <div className="custom-radio-card-mask-dot"></div> </div
                          ><div className="custom-radio-card-title">号池选号</div>
                        </div>
                      </template>
                    </a-radio>
                  </a-radio-group>
                  <template #extra>
                    <div>随机号码：运营商随机号码给客户，其他几个选项：客户可以自由选择号码</div>
                  </template>
                </a-form-item>
              </div>
              <div class="right-box-item-bottom-50" v-if="goodsForm.selectNumberType == 3">
                <a-form-item label="商品号池" field="selectNumberPoolId">
                  <a-select
                    placeholder="请选择商品号池"
                    v-model="goodsForm.selectNumberPoolId"
                    allow-search
                  >
                    <a-option v-for="item in classList" :key="item.id" :value="item.id">{{
                      item.name
                    }}</a-option>
                  </a-select>
                  <template #extra>
                    <div>选择商品号池后，客户可以选择号池内的号码</div>
                  </template>
                </a-form-item>
              </div>
              <div class="right-box-item-bottom-50">
                <a-form-item field="postType" label="快递运费">
                  <a-radio-group
                    class="radio-bcg"
                    @change=";(goodsForm.postFee = ''), (goodsForm.postTemplateId = '')"
                    v-model="goodsForm.postType"
                  >
                    <a-radio :value="0">
                      <template #radio="{ checked }">
                        <div
                          style="display: flex"
                          :class="{ 'custom-radio-card-checked': checked }"
                        >
                          <div className="custom-radio-card-mask">
                            <div className="custom-radio-card-mask-dot"></div> </div
                          ><div className="custom-radio-card-title">包邮</div>
                        </div>
                      </template>
                    </a-radio>
                    <a-radio :value="1">
                      <template #radio="{ checked }">
                        <div
                          style="display: flex"
                          :class="{ 'custom-radio-card-checked': checked }"
                        >
                          <div className="custom-radio-card-mask">
                            <div className="custom-radio-card-mask-dot"></div> </div
                          ><div className="custom-radio-card-title">固定运费</div>
                        </div>
                      </template>
                    </a-radio>
                    <a-radio :value="2">
                      <template #radio="{ checked }">
                        <div
                          style="display: flex"
                          :class="{ 'custom-radio-card-checked': checked }"
                        >
                          <div className="custom-radio-card-mask">
                            <div className="custom-radio-card-mask-dot"></div> </div
                          ><div className="custom-radio-card-title">运费模板</div>
                        </div>
                      </template>
                    </a-radio>
                  </a-radio-group>
                  <template #extra>
                    <div>按照自己需求选择</div>
                  </template>
                </a-form-item>
              </div>
              <div v-if="goodsForm.postType == 1" class="right-box-item-bottom-50">
                <a-form-item
                  label="固定邮费"
                  field="postFee"
                  asterisk-position="end"
                  :rules="[{ required: true, message: '固定邮费不能为空' }]"
                  :validate-trigger="['change', 'input']"
                >
                  <a-input-number
                    placeholder="请输入邮费"
                    v-model="goodsForm.postFee"
                    :min="0"
                    style="width: 100%"
                  />
                  <template #extra>
                    <div>对商品设置固定邮费</div>
                  </template>
                </a-form-item>
              </div>
              <div v-if="goodsForm.postType == 2" class="right-box-item-bottom-50">
                <a-form-item
                  label="运费模板"
                  field="postTemplateId"
                  asterisk-position="end"
                  :rules="[{ required: true, message: '运费模板不能为空' }]"
                  :validate-trigger="['change', 'input']"
                >
                  <a-select
                    placeholder="请选择运费模板"
                    v-model="goodsForm.postTemplateId"
                    allow-search
                  >
                    <a-option v-for="item in freightList" :key="item.id" :value="item.id">{{
                      item.name
                    }}</a-option>
                  </a-select>
                  <template #extra>
                    <div>对商品设置运费模板</div>
                  </template>
                </a-form-item>
              </div>
              <div class="right-box-item-bottom-50">
                <a-form-item field="generalStock" label="通用库存">
                  <a-radio-group class="radio-bcg" v-model="goodsForm.generalStock">
                    <a-radio :value="true">
                      <template #radio="{ checked }">
                        <div
                          style="display: flex"
                          :class="{ 'custom-radio-card-checked': checked }"
                        >
                          <div className="custom-radio-card-mask">
                            <div className="custom-radio-card-mask-dot"></div> </div
                          ><div className="custom-radio-card-title">开启</div>
                        </div>
                      </template>
                    </a-radio>
                    <a-radio :value="false">
                      <template #radio="{ checked }">
                        <div
                          style="display: flex"
                          :class="{ 'custom-radio-card-checked': checked }"
                        >
                          <div className="custom-radio-card-mask">
                            <div className="custom-radio-card-mask-dot"></div> </div
                          ><div className="custom-radio-card-title">关闭</div>
                        </div>
                      </template>
                    </a-radio>
                  </a-radio-group>
                  <template #extra>
                    <div>开启通用库存后，客户如果有通用库存数量，可以直接免费下单</div>
                  </template>
                </a-form-item>
              </div>
              <div class="right-box-item-bottom-50">
                <a-form-item field="idCardImg" label="证件上传">
                  <a-radio-group class="radio-bcg" v-model="goodsForm.idCardImg">
                    <a-radio :value="true">
                      <template #radio="{ checked }">
                        <div
                          style="display: flex"
                          :class="{ 'custom-radio-card-checked': checked }"
                        >
                          <div className="custom-radio-card-mask">
                            <div className="custom-radio-card-mask-dot"></div> </div
                          ><div className="custom-radio-card-title">开启</div>
                        </div>
                      </template>
                    </a-radio>
                    <a-radio :value="false">
                      <template #radio="{ checked }">
                        <div
                          style="display: flex"
                          :class="{ 'custom-radio-card-checked': checked }"
                        >
                          <div className="custom-radio-card-mask">
                            <div className="custom-radio-card-mask-dot"></div>
                          </div>
                          <div className="custom-radio-card-title">关闭</div>
                        </div>
                      </template>
                    </a-radio>
                  </a-radio-group>
                  <template #extra>
                    <div>开启：客户下单需要上传身份证正反面+免冠照</div>
                  </template>
                </a-form-item>
              </div>
              <div class="right-box-item-bottom-50">
                <a-form-item field="isPlaceOrderRemark" label="下单备注">
                  <a-radio-group class="radio-bcg" v-model="goodsForm.isPlaceOrderRemark">
                    <a-radio :value="true">
                      <template #radio="{ checked }">
                        <div
                          style="display: flex"
                          :class="{ 'custom-radio-card-checked': checked }"
                        >
                          <div className="custom-radio-card-mask">
                            <div className="custom-radio-card-mask-dot"></div> </div
                          ><div className="custom-radio-card-title">开启</div>
                        </div>
                      </template>
                    </a-radio>
                    <a-radio :value="false">
                      <template #radio="{ checked }">
                        <div
                          style="display: flex"
                          :class="{ 'custom-radio-card-checked': checked }"
                        >
                          <div className="custom-radio-card-mask">
                            <div className="custom-radio-card-mask-dot"></div> </div
                          ><div className="custom-radio-card-title">关闭</div>
                        </div>
                      </template>
                    </a-radio>
                  </a-radio-group>
                  <template #extra>
                    <div>开启：客户下单后，可以输入下单备注</div>
                  </template>
                </a-form-item>
              </div>
              <div class="right-box-item-bottom-50">
                <a-form-item field="discountTime" label="商品库存">
                  <a-input v-model="goodsForm.stock" placeholder="请输入商品库存">
                    <template #append>
                      <a-radio-group v-model="goodsForm.stockType">
                        <a-radio :value="0">
                          <template #radio="{ checked }">
                            <div
                              style="display: flex"
                              :class="{ 'custom-radio-card-checked': checked }"
                            >
                              <div className="custom-radio-card-mask">
                                <div className="custom-radio-card-mask-dot"></div> </div
                              ><div className="custom-radio-card-title">计算</div>
                            </div>
                          </template>
                        </a-radio>
                        <a-radio :value="1">
                          <template #radio="{ checked }">
                            <div
                              style="display: flex"
                              :class="{ 'custom-radio-card-checked': checked }"
                            >
                              <div className="custom-radio-card-mask">
                                <div className="custom-radio-card-mask-dot"></div> </div
                              ><div className="custom-radio-card-title">不计算</div>
                            </div>
                          </template>
                        </a-radio>
                      </a-radio-group>
                    </template>
                  </a-input>
                  <template #extra>
                    <div>计算：商品库存如果为0，将无法下单，无库存需求，请选择不计算</div>
                  </template>
                </a-form-item>
              </div>
              <div class="right-box-item-bottom-50">
                <a-form-item field="setMealGeneralFlow" label="年龄限制">
                  <a-input-group style="width: 100%">
                    <a-input v-model="goodsForm.minAge" placeholder="请输入开始年龄" allow-clear />
                    <a-input v-model="goodsForm.maxAge" placeholder="请输入结束年龄" allow-clear />
                  </a-input-group>
                  <template #extra>
                    <div>设置后根据身份证号码年龄，限制客户下单</div>
                  </template>
                </a-form-item>
              </div>
              <div class="right-box-item-bottom-50">
                <a-form-item field="openCardNumber" label="开卡限制">
                  <a-input-group style="width: 100%">
                    <a-input
                      v-model="goodsForm.openCardNumber"
                      placeholder="请输入数量"
                      allow-clear
                    />
                    <a-input
                      v-model="goodsForm.openCardTime"
                      placeholder="请输入检测时间：单位月"
                      allow-clear
                    />
                  </a-input-group>
                  <template #extra>
                    <div>不填为不限制</div>
                  </template>
                </a-form-item>
              </div>
              <div class="right-box-item-bottom-50">
                <a-form-item field="minLimit" label="售价限制">
                  <a-input-group style="width: 100%">
                    <a-input
                      v-model="goodsForm.minLimit"
                      placeholder="请输入最低售价"
                      allow-clear
                    />
                    <a-input
                      v-model="goodsForm.maxLimit"
                      placeholder="请输入最高售价"
                      allow-clear
                    />
                  </a-input-group>
                  <template #extra>
                    <div>售价限制，主要是限制代理设置售价的范围</div>
                  </template>
                </a-form-item>
              </div>
              <div class="right-box-item-bottom-50">
                <a-form-item field="riskStr" label="风控词">
                  <a-input v-model="goodsForm.riskStr" placeholder="请输入风控词" />
                  <template #extra>
                    <div>设置后：详细地址包括风控词，将提示客户不可下单以 ,隔开</div>
                  </template>
                </a-form-item>
              </div>
            </div>
          </div>
          <div class="right-box-item" id="tops-5">
            <div class="right-box-item-top">
              <div class="left-title">佣金设置</div>
              <div class="right-title">收起</div>
            </div>
            <div class="right-box-item-bottom">
              <div class="right-box-item-bottom-50">
                <a-form-item field="commissionRule" label="佣金规则">
                  <a-radio-group
                    class="radio-bcg"
                    @change="goodsForm.commission = ''"
                    v-model="goodsForm.commissionRule"
                  >
                    <a-radio :value="0">
                      <template #radio="{ checked }">
                        <div
                          style="display: flex"
                          :class="{ 'custom-radio-card-checked': checked }"
                        >
                          <div className="custom-radio-card-mask">
                            <div className="custom-radio-card-mask-dot"></div> </div
                          ><div className="custom-radio-card-title">秒返</div>
                        </div>
                      </template>
                    </a-radio>
                    <a-radio :value="2">
                      <template #radio="{ checked }">
                        <div
                          style="display: flex"
                          :class="{ 'custom-radio-card-checked': checked }"
                        >
                          <div className="custom-radio-card-mask">
                            <div className="custom-radio-card-mask-dot"></div> </div
                          ><div className="custom-radio-card-title">月月返</div>
                        </div>
                      </template>
                    </a-radio>
                    <a-radio :value="1">
                      <template #radio="{ checked }">
                        <div
                          style="display: flex"
                          :class="{ 'custom-radio-card-checked': checked }"
                        >
                          <div className="custom-radio-card-mask">
                            <div className="custom-radio-card-mask-dot"></div> </div
                          ><div className="custom-radio-card-title">次月底返</div>
                        </div>
                      </template>
                    </a-radio>
                  </a-radio-group>
                </a-form-item></div
              >
              <div class="right-box-item-bottom-50">
                <a-form-item field="settlementType" label="结算方式">
                  <a-radio-group class="radio-bcg" v-model="goodsForm.settlementType">
                    <a-radio :value="0">
                      <template #radio="{ checked }">
                        <div
                          style="display: flex"
                          :class="{ 'custom-radio-card-checked': checked }"
                        >
                          <div className="custom-radio-card-mask">
                            <div className="custom-radio-card-mask-dot"></div> </div
                          ><div className="custom-radio-card-title">手动结算</div>
                        </div>
                      </template>
                    </a-radio>
                    <a-radio :value="1">
                      <template #radio="{ checked }">
                        <div
                          style="display: flex"
                          :class="{ 'custom-radio-card-checked': checked }"
                        >
                          <div className="custom-radio-card-mask">
                            <div className="custom-radio-card-mask-dot"></div> </div
                          ><div className="custom-radio-card-title">自动结算</div>
                        </div>
                      </template>
                    </a-radio>
                  </a-radio-group>
                </a-form-item></div
              >
              <div class="right-box-item-bottom-50" v-if="goodsForm.commissionRule !== 2">
                <a-form-item
                  field="commission"
                  label="佣金金额"
                  asterisk-position="end"
                  :rules="[{ required: true, message: '佣金金额不能为空' }]"
                  :validate-trigger="['change', 'input']"
                >
                  <a-input-number v-model="goodsForm.commission" placeholder="请输入佣金金额" />
                </a-form-item>
              </div>
              <div class="right-box-item-bottom-50">
                <a-form-item field="settlementRequire" label="结算要求">
                  <a-input v-model="goodsForm.settlementRequire" placeholder="请输入结算要求" />
                </a-form-item>
              </div>
              <div
                class="right-box-item-bottom-50"
                v-if="goodsForm.commissionRule == 2"
                style="width: 100%"
              >
                <a-form-item
                  style="width: 100%"
                  field="everyMonthCommission"
                  asterisk-position="end"
                  :rules="[{ required: true, message: '请设置月返佣金' }]"
                  label="月返佣金"
                >
                  <a-row class="grid-demo">
                    <a-col
                      :span="24"
                      style="display: flex; align-items: center; margin-bottom: 10px"
                      v-for="(item, index) in goodsForm.everyMonthCommission"
                      :key="index"
                    >
                      <span style="white-space: nowrap; margin-right: 10px">在网第 </span>
                      <a-input
                        v-model="item.month"
                        :style="{ width: '140px' }"
                        disabled
                        placeholder="请输入月份"
                      />
                      <span style="white-space: nowrap; margin: 0px 10px"> 个月，佣金：</span>
                      <a-input
                        v-model="item.commission"
                        :style="{ width: '140px' }"
                        placeholder="请输入佣金金额"
                      />
                      <i-add
                        style="cursor: pointer; margin-left: 10px"
                        v-if="index == 0"
                        size="18"
                        @click="addItem"
                      />
                      <i-reduce
                        style="cursor: pointer; margin-left: 10px"
                        v-else
                        size="18"
                        @click="handleDelete(index)"
                      />
                    </a-col>
                  </a-row>
                </a-form-item>
              </div>
              <div class="right-box-item-bottom-50" style="width: 100%">
                <a-form-item field="precautions" label="注意事项">
                  <RichTextEditor v-model="goodsForm.precautions" ref="richTextEditors" />
                </a-form-item>
              </div>
            </div>
          </div>
        </a-form>
      </div>
    </div>

    <!-- 设置可发货地区/禁区 -->
    <a-modal
      v-model:visible="regionVisible"
      @before-close="cancelRegion"
      :title="goodsForm.areaType == 1 ? '设置禁区' : '设置可发地区'"
      width="450px"
      :mask-closable="false"
      title-align="start"
    >
      <a-spin :loading="loadingTree" tip="加载中····" style="width: 100%">
        <a-input-search
          placeholder="请输入地址名称"
          style="margin-bottom: 8px; width: 100%"
          v-model="searchKey"
        />
        <div style="display: flex; justify-content: space-between; margin-top: 10px">
          <div style="width: 80%"
            ><a-select
              allow-search
              v-model="mallId"
              placeholder="请选择商品"
              allow-clear
              @change="changeMall"
              :options="goodAllList"
            />
            <div style="color: #86909c; font-size: 11px; margin-top: 5px"
              >复制：将已选择商品设置的地区复制到当前商品上</div
            >
          </div>
          <div>
            <a-button type="primary" html-type="submit" @click="copyArea"> 复制 </a-button>
          </div>
        </div>
        <a-divider dashed>其他设置</a-divider>
        <a-tree
          :virtualListProps="{
            height: 600,
          }"
          :checkable="true"
          checked-strategy="all"
          tree-checked-strategy="all"
          v-model:checked-keys="selectList"
          :data="regionList"
          :field-names="{ key: 'code', title: 'name' }"
          :expanded-keys="mergedExpandedKeys"
          @expand="handleExpand"
          ><template #title="nodeData">
            <template v-if="((index = getMatchIndex(nodeData?.name)), index < 0)">{{
              nodeData?.name
            }}</template>
            <span v-else>
              {{ nodeData?.name?.substr(0, index) }}
              <span style="color: var(--color-primary-light-4)">
                {{ nodeData?.name?.substr(index, searchKey.length) }} </span
              >{{ nodeData?.name?.substr(index + searchKey.length) }}
            </span>
          </template>
        </a-tree>
      </a-spin>
      <template #footer>
        <a-space>
          <a-button @click="cancelRegion">取消</a-button>
          <a-button type="primary" @click="handleBeforeOkRegion">确定</a-button>
        </a-space>
      </template>
    </a-modal>
    <a-modal
      v-model:visible="imageListvisible"
      title-align="start"
      title="选择图片"
      :body-style="{ padding: '0px !important' }"
      width="1157px"
      height="500px"
      :mask-closable="false"
    >
      <ImageChoose @setImages="setImages" :activeTag="activeTag" />
      <template #footer>
        <a-space>
          <a-button @click="imageListvisible = false">取消</a-button>
          <a-button type="primary" @click="handleBeforeOkSumImg">确定</a-button>
        </a-space>
      </template>
    </a-modal>
    <!-- 取色笔 -->
    <a-modal
      v-model:visible="colorPickingShow"
      @before-close="colorPickingShow = false"
      title="吸色工具"
      :mask-closable="false"
      title-align="start"
      :footer="false"
    >
      <div style="display: flex; justify-content: center; flex-wrap: wrap">
        <canvas ref="canvas" @click="pickColor"></canvas>
        <div
          v-if="goodsForm.placeTemplateBackgroundColor"
          style="
            width: 100%;
            padding: 5px;
            border: 1px solid #86909c;
            border-radius: 5px;
            margin-top: 20px;
          "
        >
          <div
            :style="{
              width: '100%',
              height: '30px',
              backgroundColor: goodsForm.placeTemplateBackgroundColor,
              textAlign: 'center',
              lineHeight: '30px',
            }"
            >{{ goodsForm.placeTemplateBackgroundColor }}</div
          >
        </div>
      </div>
      <template #footer>
        <a-space>
          <a-button @click="colorPickingShow = false">取消</a-button>
          <a-button type="primary" @click="colorPickingShow = false">确定</a-button>
        </a-space>
      </template>
    </a-modal>
  </div>
</template>

<script setup lang="ts">
  import { get, post } from '@/api/http'
  import router from '@/router'
  import { computed, onMounted, ref } from 'vue'
  import useCommonStore from '@/store/modules/common'
  import { Message } from '@arco-design/web-vue'
  import { useRoute } from 'vue-router'
  import { reSetImage } from '@/api/imageNiu'
  const mallId = ref('')
  const areaList: any = ref([])
  function changeMall(val: any) {
    get({
      url: '/app/mall/info',
      data: { id: val },
    }).then((res: any) => {
      areaList.value = res.data.areaCode
    })
  }
  function copyArea() {
    selectList.value = JSON.parse(JSON.stringify(areaList.value))
    console.log(selectList.value)
  }
  //地区筛选
  const searchKey = ref('')
  // 记录用户手动操作的展开状态
  const manuallyExpandedKeys = ref([])

  const expandedKeys = computed(() => {
    if (!searchKey.value) {
      return manuallyExpandedKeys.value
    }
    const keys = new Set([...manuallyExpandedKeys.value])

    const findParentKeys = (data, targetKey) => {
      for (const item of data) {
        if (item.code === targetKey) {
          return true
        }
        if (item.children) {
          if (findParentKeys(item.children, targetKey)) {
            keys.add(item.code)
            return true
          }
        }
      }
      return false
    }

    const loop = (data) => {
      data.forEach((item) => {
        if (item.name.toLowerCase().indexOf(searchKey.value.toLowerCase()) > -1) {
          keys.add(item.code)
          findParentKeys(regionList.value, item.code)
        }
        if (item.children) {
          loop(item.children)
        }
      })
    }

    loop(regionList.value)
    return Array.from(keys)
  })

  // 合并搜索展开的节点和用户手动展开的节点
  const mergedExpandedKeys = computed(() => {
    return expandedKeys.value
  })

  // 处理节点展开/折叠事件
  const handleExpand = (expandedKeys, { expanded }) => {
    if (expanded) {
      console.log(1)
      manuallyExpandedKeys.value = [...new Set([...manuallyExpandedKeys.value, ...expandedKeys])]
    } else {
      manuallyExpandedKeys.value = expandedKeys
    }
    console.log(expandedKeys)
  }

  function getMatchIndex(title: any) {
    if (!searchKey.value) return -1
    return title.toLowerCase().indexOf(searchKey.value.toLowerCase())
  }

  const useRoutes = useRoute()
  const useCommon = useCommonStore()
  const imageListvisible = ref(false)
  //取色器
  const colorPickingShow = ref(false)

  const canvas = ref()

  function openColorPicking() {
    if (goodsForm.value.img.length > 0) {
      loadImage()
      colorPickingShow.value = true
    } else {
      Message.error('请先上传商品图片')
    }
  }

  function loadImage() {
    const img = new Image()
    img.crossOrigin = 'Anonymous' // 如果图片来自不同域名，确保跨域
    img.onload = () => {
      drawImageToCanvas(img)
    }
    img.src = window.location.protocol + '//' + window.location.host + goodsForm.value.img[0].url
    console.log(img.src)
  }
  function drawImageToCanvas(img: any) {
    const canvas1 = canvas.value
    const ctx = canvas1.getContext('2d')
    const scaleFactor = 400 / img.width
    canvas1.width = 400
    canvas1.height = img.height * scaleFactor
    ctx.drawImage(img, 0, 0, canvas1.width, canvas1.height)
  }
  function pickColor(event: any) {
    const canvas1 = canvas.value
    const ctx = canvas1.getContext('2d')
    const x = event.offsetX
    const y = event.offsetY
    const pixel = ctx.getImageData(x, y, 1, 1).data
    const rgb = `rgb(${pixel[0]}, ${pixel[1]}, ${pixel[2]})`
    goodsForm.value.placeTemplateBackgroundColor = rgb
  }

  //图文详情展开
  const expand = ref(false)

  function expandFn() {
    expand.value = !expand.value
  }

  //商品图片上传
  const onSuccessBcg = (fileItem: any) => {
    goodsForm.value.img.push({
      url: fileItem.response.data.path,
    })
  }

  function delImg(fileItem: any) {
    return new Promise((resolve, reject) => {
      const index = goodsForm.value.img.findIndex((item: any) => item.url === fileItem.url)
      goodsForm.value.img.splice(index, 1)
      resolve(true)
    })
  }
  const activeTag = ref('')
  const clickChoose = (item: any) => {
    if (item == 'goodsImage2') {
      activeTag.value = item + '-' + Math.random()
    } else {
      activeTag.value = item
    }
    imageListvisible.value = true
  }
  // 删除列表图
  const delDetailImg = (item, index) => {
    goodsForm.value.img.splice(index, 1)
  }
  const chooseImagesList: any = ref([])
  const setImages = (e: any) => {
    console.log(111111111111111, e.value)
    chooseImagesList.value = e.value
  }
  const handleBeforeOkSumImg = () => {
    console.log(chooseImagesList.value)
    if (chooseImagesList.value.length > 0) {
      if (chooseImagesList.value[0].activeTag == 'goodsImage1') {
        info.info.productImage = chooseImagesList.value[0].path
      } else if (chooseImagesList.value[0].activeTag == 'goodsImage') {
        info.info.mainImage = chooseImagesList.value[0].path
      } else if (chooseImagesList.value[0].activeTag.split('-')[0] == 'goodsImage2') {
        console.log(chooseImagesList.value)
        const arry: any = []
        chooseImagesList.value.forEach((item: any) => {
          arry.push({ url: item.path })
        })
        console.log(arry)
        goodsForm.value.img = goodsForm.value.img.concat(arry)
      }
      imageListvisible.value = false
    } else {
      Message.error('请先选择图片')
    }
  }
  //顶部操作
  function goNext() {
    router
      .replace({
        path: '/shopping/mall/list',
      })
      .then(() => {})
  }

  // 左侧数据
  const leftList = ref([
    { id: 1, name: '商品信息', href: '#tops-1' },
    { id: 2, name: '商品介绍', href: '#tops-2' },
    { id: 3, name: '套餐信息', href: '#tops-3' },
    { id: 4, name: '下单设置', href: '#tops-4' },
    { id: 5, name: '佣金设置', href: '#tops-5' },
  ])

  const activeKey = ref(1)

  // 左侧点击切换
  function leftClickItem(val: any) {
    activeKey.value = val
  }

  // 右侧数据
  const goodsForm: any = ref({
    //商品渠道
    channelId: '',
    //商品类型
    type: 0, //0物联卡 1号卡
    //运营商
    operator: [],
    //分类ID
    classId: '',
    //海报ID
    posterId: '',
    // 商品名称
    name: '',
    // 成本
    cost: 0,
    //售价
    price: 0,
    //排序
    sort: 0,
    //销量
    sales: 0,
    //简短介绍
    shortIntroduce: '',
    //分享介绍
    shareIntroduce: '',
    //商品编码
    coding: '',
    //商品主推
    mainPush: true,
    //推荐指数
    starRating: 0,
    //归属地 0随机 1固定 2收货地
    belongingPlace: 0,
    //归属地为固定时的地区code
    belongingPlaceArea: '',
    //所属系列
    seriesId: '',
    //套餐价格
    setMealPrice: '',
    //套餐通用流量
    setMealGeneralFlow: '',
    //套餐定向流量
    setMealDirectionalFlow: '',
    //套餐原价
    setMealOriginalPrice: '',
    //原套餐通用流量
    setMealOriginalGeneralFlow: '',
    //原套餐定向流量
    setMealOriginalDirectionalFlow: '',
    //套餐介绍
    setMealIntroduce: '',
    //通话时间
    callMinutes: '',
    //首充金额
    firstPayAmount: '',
    //首充介绍
    firstPayIntroduce: '',
    //合约时长
    contractTime: '',
    //优惠时长
    discountTime: '',
    //优惠时长类型 0固定优惠 1到期可续
    discountTimeType: 0,
    // 最小售价限制
    minLimit: '',
    //最大售价限制
    maxLimit: '',
    // 库存类型 0计算库存 1不计算库存
    stockType: 1,
    //库存数量 类型为计算库存是必填 默认0
    stock: 0,
    //证件号码 0隐藏 1随意输 2合法格式
    idCard: 2,
    //通用库存,开启表示客户如果有通用库存数量，可以直接免费下单
    generalStock: true,
    //快递运费类型 0包邮 1固定运费 2运费模板
    postType: 0,
    // 类型为 1固定运费时，存储运费
    postFee: 1,
    //类型为 2运费模板时，存储运费模板ID
    postTemplateId: '',
    //地区设置JSON 存储地区code
    areaCode: '',
    //地区类型 0可发货  1不可发货
    areaType: 1,
    // 下单验证方式 -1不验证 0验证码 1二要素 2三要素
    placeOrderCheck: -1,
    // 选号方式 0随机号码 1激活选号 2在线选号 3号池选号
    selectNumberType: 0,
    //选号方式为号池选号时为号码池ID
    selectNumberPoolId: '',
    //是否上传证件照
    idCardImg: false,
    // 是否可以输入下单备注
    isPlaceOrderRemark: true,
    //最小年龄
    minAge: '',
    // 最大年龄
    maxAge: '',
    //开卡限制 数量
    openCardNumber: '',
    // 开卡限制 时间 多长时间内可下多少张
    openCardTime: '',
    //风控词 ,隔开
    riskStr: '',
    //佣金金额
    commission: '',
    // 月月反佣金
    everyMonthCommission: [{ month: 1, commission: '' }],
    // 佣金规则 0秒反 1次月底反 2月月反
    commissionRule: 0,
    //结算方式 0手动结算 1自动结算
    settlementType: 0,
    //结算要求
    settlementRequire: '',
    // 注意事项
    precautions: '',
    //下单模板
    placeTemplate: 1,
    //下单模板背景颜色
    placeTemplateBackgroundColor: '',
    //优惠详情
    discountIntroduce: '',
    //商品介绍
    content: '',
    //商品图片
    img: [],
    tagList: [],
  })

  const goodRef = ref()
  function handleSubmitGood() {
    goodRef.value?.validate().then((error: any) => {
      if (!error) {
        const list: any = []
        const list1: any = []
        if (goodsForm.value.img.length > 0) {
          goodsForm.value.img.forEach((item: any) => {
            list.push(item.url)
          })
        }
        if (goodsForm.value.tagList.length > 0) {
          goodsForm.value.tagList.forEach((item: any) => {
            list1.push({ id: item })
          })
        }

        if (goodsForm.value.commissionRule == 2) {
          const list2: any = []
          goodsForm.value.everyMonthCommission.forEach((item: any, index: any) => {
            list2.push({ month: index + 1, commission: item.commission })
          })
          goodsForm.value.everyMonthCommission = list2
        } else {
          goodsForm.value.everyMonthCommission = []
        }

        if (goodsForm.value.areaCode == '') {
          goodsForm.value.areaCode = []
        }
        if (goodsForm.value.id) {
          post({
            url: '/app/mall/update',
            data: () => {
              return {
                ...goodsForm.value,
                img: list,
                tagList: list1,
              }
            },
          })
            .then((res) => {
              if (res.code == 0) {
                Message.success(res.msg)
                router.push('/shopping/mall/list')
              } else {
                Message.error(res.msg)
              }
            })
            .catch(console.log)
        } else {
          post({
            url: '/app/mall/insert',
            data: () => {
              return {
                ...goodsForm.value,
                img: list,
                tagList: list1,
              }
            },
          })
            .then((res) => {
              if (res.code == 0) {
                Message.success(res.msg)
                router.push('/shopping/mall/list')
              } else {
                Message.error(res.msg)
              }
            })
            .catch(console.log)
        }
      }
    })
  }

  // 月月返插入
  const addItem = () => {
    goodsForm.value.everyMonthCommission.push({
      month: goodsForm.value.everyMonthCommission.length + 1,
      commission: '',
    })
  }
  // 月月返删除
  const handleDelete = (index: any) => {
    goodsForm.value.everyMonthCommission.splice(index, 1)
  }
  //切换商品类型
  function changeType(val: any) {
    goodsForm.value.type = val
  }
  //获取分类
  const classList: any = ref([])
  function classListFn() {
    get({
      url: '/app/mall/class/list',
    }).then((res: any) => {
      classList.value = res.data
    })
  }
  //获取系列
  const seriesNo: any = ref([])
  const seriesIds = () => {
    useCommon.seriess().then((res) => {
      seriesNo.value = res.data
    })
  }
  //获取标签
  const tagList: any = ref([])
  function tagListFn() {
    get({
      url: '/app/tag/list',
    }).then((res: any) => {
      tagList.value = res.data
    })
  }
  //获取渠道
  const channelList: any = ref([])
  function channelListFn() {
    get({
      url: '/app/mall/channel/name/list',
    }).then((res: any) => {
      channelList.value = res.data
    })
  }
  //获取海报
  const posterList: any = ref([])
  function posterListFn() {
    get({
      url: '/app/poster/get/name/list',
    }).then((res: any) => {
      posterList.value = res.data
    })
  }
  //获取地区
  const districtsList: any = ref([])
  const fieldNames = { value: 'code', label: 'name' }
  function getDistricts() {
    useCommon.getDistrictsList(2, true).then((res: any) => {
      districtsList.value = res.data
    })
  }

  //设置可发货/禁区
  const regionVisible = ref(false)
  const loadingTree = ref(false)
  const selectList: any = ref([])
  const arr: any = ref([])
  const regionList: any = ref([])
  const cancelRegion = () => {
    arr.value = []
    selectList.value = []
    regionVisible.value = false
  }
  const handleBeforeOkRegion = () => {
    console.log(selectList.value)
    goodsForm.value.areaCode = selectList.value
    console.log(goodsForm.value.regionalRestrictions)
    regionVisible.value = false
  }
  const clickSet = () => {
    getDistrictsList(3)
    regionVisible.value = true
    selectList.value = goodsForm.value.areaCode
  }

  //获取地区列表
  const getDistrictsList = (val: any) => {
    useCommon.getDistrictsList(val).then((res: any) => {
      regionList.value = res.data
    })
  }

  //获取运费模板
  const freightList: any = ref([])
  function freightListFn() {
    get({
      url: '/app/mall/post/fee/template/get/list',
    }).then((res: any) => {
      freightList.value = res.data
    })
  }

  //商品
  const goodAllList: any = ref([])
  function goodAllListFn() {
    useCommon.mallFn().then((res) => {
      goodAllList.value = res.data
    })
  }

  onMounted(() => {
    if (useRoutes.query.goods) {
      get({
        url: '/app/mall/info',
        data: { id: useRoutes.query.goods },
      }).then((res: any) => {
        const obj: any = res.data
        if (obj.tagList) {
          const list: any = []
          obj.tagList.forEach((item: any) => {
            list.push(item.id)
          })
          obj.tagList = list
        }
        if (obj.img) {
          const list1: any = []
          obj.img.forEach((item: any, index: any) => {
            list1.push({
              url: item,
            })
          })
          obj.img = list1
        }
        if (!obj.everyMonthCommission) {
          obj.everyMonthCommission = [{ month: 1, commission: '' }]
        }
        goodsForm.value = obj
      })
      console.log(goodsForm.value.img)
    }
    classListFn()
    seriesIds()
    tagListFn()
    getDistricts()
    posterListFn()
    freightListFn()
    channelListFn()
    goodAllListFn()
  })
</script>

<style lang="less" scoped>
  :deep(.arco-anchor-line-less .arco-anchor-link-active > .arco-anchor-link) {
    background-color: #e8f7ff !important;
    border-radius: 5px;
  }
  :deep(.arco-anchor-link:hover) {
    background-color: #e8f7ff !important;
    color: #3491fa;
    text-align: center !important;
  }
  :deep(.arco-anchor-link) {
    padding: 19px;
    text-align: center !important;
  }
  :deep(.arco-input-append) {
    border-left: 0;
    padding-left: 5px;
    padding: 0;
    .arco-radio {
      margin-right: 10px;
    }
  }
  :deep(.arco-form-item) {
    margin-bottom: 10px;
  }
  :deep(.arco-checkbox-group .arco-checkbox) {
    margin-right: 5px;
  }
  :deep(.arco-form-item-label-col) {
    padding-right: 0;
  }
  :deep(.arco-rate) {
    font-size: 12px;
    color: #dbdcde !important;
    min-height: 16px;
  }
  :deep(.bcg) {
    padding: 10px 0px 0px !important;
  }
  .imageBoxDetail {
    width: 100%;
    height: auto;
    display: flex;
    align-items: center;
    cursor: pointer;
    .delImages:hover {
      .delBox {
        width: 100%;
        height: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        position: absolute;
        top: 0px;
        left: 0px;
        right: 0px;
        background: #0000006e;
      }
    }
    .delImages {
      width: 70px;
      height: 70px;
      margin-right: 10px;
      position: relative;
      .showImage {
        width: 70px;
        height: 70px;
        display: block;
      }
      .delBox {
        display: none;
      }
    }

    .chooseImageBtns {
      width: 70px;
      height: 70px;
      display: flex;
      justify-content: center;
      align-items: center;
      background-color: #f2f3f5;
      border-radius: 4px;
    }
    .chooseImageBtns:hover {
      background-color: #dbdcde;
    }
  }
  .custom-checkbox-card {
    // border: 1px solid var(--color-border-2);
    border-radius: 4px;
    width: 70px;
    line-height: 32px;
    text-align: center;
    box-sizing: border-box;
    background-color: #f2f3f5;
  }

  .custom-checkbox-card-mask {
    height: 14px;
    width: 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 2px;
    border: 1px solid var(--color-border-2);
    box-sizing: border-box;
  }

  .custom-checkbox-card-mask-dot {
    width: 8px;
    height: 8px;
    border-radius: 2px;
  }

  .custom-checkbox-card-title {
    display: flex;
    align-items: center;
    justify-content: center;
    img {
      width: 15px;
      height: 15px;
      margin-right: 5px;
    }
    color: var(--color-text-1);
    font-size: 14px;
  }

  .custom-checkbox-card:hover,
  .custom-checkbox-card-checked,
  .custom-checkbox-card:hover .custom-checkbox-card-mask,
  .custom-checkbox-card-checked .custom-checkbox-card-mask {
    border-color: rgb(var(--primary-6));
  }

  .custom-checkbox-card-checked {
    border: 1px solid #3491fa;
    line-height: 30px;
    box-sizing: border-box;
    background-color: #e8f7ff;
  }

  .custom-checkbox-card:hover .custom-checkbox-card-title,
  .custom-checkbox-card-checked .custom-checkbox-card-title {
    color: rgb(var(--primary-6));
    border-radius: 5px;
    background-color: #e8f7ff;
  }

  .custom-checkbox-card-checked .custom-checkbox-card-mask-dot {
    background-color: rgb(var(--primary-6));
  }
  .radio-box {
    display: flex;
    .radio-box-item {
      width: 70px;
      text-align: center;
      line-height: 32px;
      border-radius: 5px;
      cursor: pointer;
      background-color: #f2f3f5;
    }

    .active-radio-box-item {
      width: 70px;
      text-align: center;
      border-radius: 5px;
      border: 1px solid #3491fa;
      line-height: 30px;
      box-sizing: border-box;
      cursor: pointer;
      color: rgb(var(--primary-6));
      background-color: #e8f7ff;
    }
  }
  .good-content {
    margin-top: 50px;
    display: flex;
    justify-content: center;
    .left-box {
      width: 150px;
      max-height: 305px;
      border-radius: 5px;
      background-color: #fff;
      box-sizing: border-box;
      .left-box-item {
        padding: 10px;
        cursor: pointer;
      }
      .left-box-item:hover {
        padding: 10px;
        color: rgb(var(--primary-6));
        background-color: #e8f7ff;
        border-radius: 5px;
      }
      .active-left-box-item {
        padding: 10px;
        color: rgb(var(--primary-6));
        background-color: #e8f7ff;
        border-radius: 5px;
        cursor: pointer;
      }
    }

    .right-box {
      width: 1400px;
      margin-left: 50px;
      border-radius: 5px;
      overflow-y: scroll;
      .right-box-item {
        padding: 15px 20px;
        background-color: #fff;
        margin-top: 20px;
        border-radius: 5px;
        .right-box-item-top {
          display: flex;
          justify-content: space-between;
          .left-title {
            font-size: 16px;
          }
          .right-title {
            font-size: 11px;
            color: #86909c;
          }
        }
        .right-box-item-bottom {
          display: flex;
          flex-wrap: wrap;
          justify-content: space-between;
          .right-box-item-bottom-50 {
            width: calc(50% - 10px);
            margin-top: 10px;
          }
        }
      }
    }
  }
  .handle_collection {
    height: 55px;
    width: 100%;
    padding: 0px 20px;
    display: flex;
    justify-content: right;
    align-items: center;
    background-color: #333333;
    box-sizing: border-box;
    display: flex;
    justify-content: space-between;
    align-items: center;
    z-index: 10;
    .fanhuiBtn {
      display: flex;
      justify-content: space-between;
      align-items: center;
      color: var(--color-neutral-3);
      cursor: pointer;
      padding: 6px 12px;
      box-sizing: border-box;
      border-radius: 2px;
      .texts {
        margin-left: 6px;
      }
    }
    .fanhuiBtn:hover {
      background-color: #ffffff3b;
    }
    .yulanBtn {
      width: 60px;
      text-align: center;
      color: var(--color-neutral-3);
      cursor: pointer;
      padding: 6px 12px;
      box-sizing: border-box;
      border-radius: 2px;
    }
    .yulanBtn:hover {
      background-color: #ffffff3b;
    }
  }

  :deep(.arco-checkbox) {
    padding-left: 0 !important;
    padding-right: 5px !important;
  }
</style>
